<template>
  <div>
    <h1>我的页面</h1>
    <div class="header"></div>

    <div class="box3"></div>

    <!-- <div class="box1"></div>

  <div class="box2"></div> -->

    <hr />

    <VanButton type="primary">我的</VanButton>

    <VanConfigProvider :theme-vars="vars">
      <div style="border: 1px solid #000">
        <VanButton type="primary">我的</VanButton>
      </div>
    </VanConfigProvider>

    <VanConfigProvider :theme-vars="vars2">
      <div style="border: 1px solid #000">
        <VanButton type="primary">我的</VanButton>
      </div>
    </VanConfigProvider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const vars = reactive({
  buttonPrimaryColor: 'green'
})

const vars2 = reactive({
  buttonPrimaryColor: 'yellow'
})
</script>

<style lang="scss" scoped>
.header {
  height: 312px;
  background-color: green;
}

.box1 {
  font-size: 12px;
  width: 100em;
  height: 100em;
  background-color: red;
}

.box2 {
  font-size: 12px;
  width: 100rem;
  height: 100rem;
  background-color: red;
}

.box3 {
  width: 100vw;
  height: 100vw;
  background-color: red;
}
</style>
